import React,{Component} from 'react';
import {NavLink } from 'react-router-dom';
import './nav.css';
export default class Nav extends Component {
    constructor(){
        super();
        this.state={
            nav: [{
                id: '1',
                name: '推荐音乐',
                path: '/index/home'
            }, {
                id: '2',
                name: '热歌榜',
                path: '/index/hot'
            }, {
                id: '3',
                name: '搜索',
                path: '/index/search'
            }]
        }
    }
    render(){
        
        let nav = this.state.nav;
        let navlist = nav.map((nav, index) => <li key={index}>
            <NavLink to={nav.path} activeClassName='nav-active'>{nav.name}</NavLink>
        </li>);
        return (
            <ul className='nav-list clear'>
                {navlist}
            </ul>
        )
    }
}